<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #ff0000;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: #ff0000;
            box-shadow: 0 0 10px 2px #00ff00;
        }
        .loading{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 5px solid #e1e1e1;
            border-left-color: #00ff00;
            animation: load-animation 1s linear infinite;
        }
        @keyframes load-animation{
            from{
                transform: rotate(0deg)
            }
            to{
                transform: rotate(360deg)
            }
        }
    </style>
</head>
<body>
    
    <pre>
        1.居中问题
            1.1 使用text-align:center; 适用于子元素为图片、按钮、文本等行内元素的居中
            1.2 设置margin:auto；把子元素的margin-left、margin-right设置为auto、适用于宽度确定的块级元素水平居中；
            1.3 设置子元素line-height值等于父元素的高度。适用于只有一行文本的垂直局居中
            1.4 绝对定位居中
                适用于宽高确定的子元素水平垂直居中
                .item{
                    position: absolute;
                    left: 50%;
                    right: 50%;
                    margin-left: -100px;
                    margin-right: -100px;
                }
                适用于宽高不确定的子元素的垂直居中
                .item{
                    positon: absolute;
                    left: 50%;
                    top: 50%;
                    <!-- 相对于自身平移一半宽高 -->
                    transform:　translate(-50%, -50%);
                }
            1.5使用flex布局
                .container{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
        2.三角形气泡
            <div class="box"></div>   
        3.阴影 box-shadow  
            .box{
                box-shawdow: h-shadow v-shadow blur spread color inset;
            }
            h-shadow: 必须，水平阴影位置，正值向右负值向左
            v-shadow：必须，垂直阴影位置，正值向下负值向上
            blur: 可选，模糊半径
            spread: 可选，阴影尺寸
            color: 可选，阴影颜色
            inset: 可选，将外部阴影转换为内部阴影
            <div class="box2"></div>    
         4.animation动画
            首先定义@keyframe规则，然后使用animation属性将动画规则绑定到某个元素上。
            @keyframes animationName{
                from {
                    background: red;
                }
                to {
                    background: blue;
                }
            }
            .box{
                <!-- 周期为2s 以ease-in的速度曲线延迟1s后循环播放 -->
                animation: animationName 2s ease-in 1s infinite;
            }     
            animation属性值：
                animation-duration: 定义动画完成的时间，默认0，单位s或者ms
                animation-timing-function: 定义动画的曲线速度，默认ease即低速开始然后加速最后变慢
                animation-delay: 动画延迟时间，默认0立即执行
                animation-iteration-count: 播放次数，默认1，设置infinite循环播放 
                animation-direction: 是否在下一周期逆向播放，默认normal正常播放
                animation-fill-mode: 规定动画时间之外的状态，设置为forwards可以再动画完成后，保留最后一帧。
            使用animation制作loading效果
            <div class="loading"></div>     
    </pre>

</body>
</html>